<template>
  <view class="user-center">
    <view class="user-info">
      <view class="col-l">
        <view class="name">
          {{ userInfo.userName }}
        </view>
        <view class="tips">
          加入任务小助手的第{{ createdDay }}天
        </view>
      </view>
      <view class="post">
        <image :src="userInfo.avatar" mode="aspectFill" />
      </view>
    </view>

    <view class="quick-entry">
      <view class="col-l" @click="goPage('/pages/child/index')">
        <view class="title">
          我的子女
        </view>
        <view class="count">
          {{ childLists.length }}
        </view>
      </view>
      <view class="col-r" @click="goPage('/pages/task/index')">
        <view class="title">
          任务中心
        </view>
        <view class="count">
          {{ taskLists.length }}
        </view>
      </view>
    </view>

    <view class="more-link">
      <view v-for="(item, index) in moreLink" :key="index" class="link-item" @click="goPage(item.link)">
        <image :src="`https://mp-faaaa8a0-2641-45b8-8dbc-bcb0d1463eb4.cdn.bspapp.com/app/${item.icon}`" class="icon" />
        <view class="text">
          {{ item.text }}
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import { useChildStore } from '@/store/child'
import { useTaskStore } from '@/store/task'

defineOptions({
  name: 'Me',
})

definePage({
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '我的',
    backgroundColor: '#fff',
  },
})

const moreLink = ref([{
  icon: 'icon-user-link-gift.svg',
  text: '积分中心',
  link: '/pages/integral/index',
}, {
  icon: 'icon-user-link-task.svg',
  text: '任务记录',
  link: '/pages/history/index',
}])
// #region Props
// #endregion
// #region Emits
// #endregion
// #region Hooks
const userStore = useUserStore()
const taskStore = useTaskStore()
const childStore = useChildStore()
const { childLists } = storeToRefs(childStore)
const { taskLists } = storeToRefs(taskStore)
const { userInfo } = storeToRefs(userStore)
// #endregion
// #region Computed
const createdDay = computed(() => {
  return dayjs().diff(userInfo.value.createdAt, 'day') + 1
})
// #endregion
// #region Watch
// #endregion
// #region Event
// #endregion
// #region Function
function goPage(url: string) {
  uni.navigateTo({
    url,
  })
}

// #endregion
// #region Life Cycle
onLoad(() => {
  if (!userInfo.value.userName) {
    userStore.fetchUserInfo()
  }
  taskStore.fetchTaskList()
})
// #endregion
// #region Expose
// #endregion
</script>

<style lang="scss">
.user-center {
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .col-l {
      display: flex;
      flex-direction: column;
      .name {
        font-size: 30px;
        font-weight: 800;
        color: var(--main-color);
      }
      .tips {
        font-size: 14px;
        color: rgba($color: #000000, $alpha: 0.5);
      }
    }
    .post {
      width: 80px;
      height: 80px;
      border-radius: 80px;
      padding: 0;
      margin: unset;
      image {
        border-radius: 80px;
      }
    }
  }
  .quick-entry {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 40px 0;
    .col-l,
    .col-r {
      height: 70px;
      border-radius: 8px;
      flex: 1 0 auto;
      width: 30%;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      position: relative;
      .title {
        color: var(--main-color);
        font-size: 18px;
      }
      .count {
        color: var(--light-color);
        font-size: 24px;
        font-weight: 600;
      }
    }
    .col-l {
      background: var(--card-bg-color);

      &::before {
        content: '';
        background: url('https://mp-faaaa8a0-2641-45b8-8dbc-bcb0d1463eb4.cdn.bspapp.com/app/icon-user-child.png')
          no-repeat;
        width: 68px;
        height: 68px;
        background-size: cover;
        position: absolute;
        right: 0;
      }
    }
    .col-r {
      background: var(--main-light-bg-color);
      &::before {
        content: '';
        background: url('https://mp-faaaa8a0-2641-45b8-8dbc-bcb0d1463eb4.cdn.bspapp.com/app/icon-user-task.png')
          no-repeat;
        width: 63px;
        height: 59px;
        background-size: cover;
        position: absolute;
        right: 0;
      }
    }
  }
  .more-link {
    display: flex;
    flex-direction: column;
    gap: 30px;
    .link-item {
      display: flex;
      align-items: center;
      font-size: 18px;
      color: var(--text-color);
      position: relative;
      &::after {
        content: '';
        display: flex;
        background: url('https://mp-faaaa8a0-2641-45b8-8dbc-bcb0d1463eb4.cdn.bspapp.com/app/icon-more-gary.png')
          no-repeat;
        background-size: cover;
        width: 24px;
        height: 24px;
        position: absolute;
        right: 0;
      }
      .icon {
        width: 24px;
        height: 24px;
        margin-right: 20px;
      }
    }
  }
}
</style>
